<template>
  <el-dialog
    v-model="dialogVisible"
    title="选择订单类型"
    width="500px"
    :before-close="handleClose"
  >

    <el-form label-position="right" size="small" class="filter-form-inline" label-width="200px">

      <el-form-item label="订单类型/是否分户：">
        <el-radio-group v-model="types">
          <div style="display: grid">
            <el-radio label="1">配送商配送-分户订单</el-radio>
            <el-radio label="2">配送商配送-非分户订单</el-radio>
            <el-radio label="3">厂家配送-分户订单</el-radio>
            <el-radio label="4">厂家配送-非分户订单</el-radio>
          </div>

        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="dialogConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {useRouter} from 'vue-router'
import {defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'TypeDialog',
  setup() {
    const router = useRouter()
    var data = reactive({
      dialogVisible: false,
      types: '1'
    })

    const openDialog = () => {
      data.dialogVisible = true
    }

    const handleClose = () => {
      data.dialogVisible = false
    }

    const dialogConfirm = () => {
      router.push({ name: 'addOrder', query: { type: data.types }})
    }

    return {
      ...toRefs(data),

      openDialog,
      handleClose,
      dialogConfirm,
    }
  }
})
</script>

<style scoped>

</style>
